<template>
	<view>
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="导航" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<view>
				<map scale="14" :longitude="longitude" :latitude="latitude" :markers="markers"></map>
			</view>
			<view style="height: 10vh;margin-top: 2vh;">
				<u-text text="东百事汽车生活馆" size="20" bold> </u-text>
				<u-text text="山阳区人民路与解放路交叉口" line-height="50"></u-text>
				<view class="nav_btn">
					导航
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				markers: [{
					id: 1,
					width: 20,
					height: 30,
					longitude: 113.56045049999999,
					latitude: 34.814811999999996,
					iconPath: '/static/images/ls/椭圆 3 拷贝 2@3x.png',
					callout: {
						content: '山阳区人民西路2号',
						bgColor: '#FC6330',
						color: '#fff',
						fontSize: 14,
						textAlign: 'center',
						display: 'ALWAYS',
						borderRadius: 25,
						padding: 10,
					},
				}]
			}
		},
		onReady() {
			let that = this
			uni.getLocation({
				type: 'gps',
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					console.log('当前位置的经度：' + that.longitude);
					console.log('当前位置的纬度：' + that.latitude);
				},
				fail: function(err) {
					console.error('获取位置失败：', err);
				}
			});
		},
		methods: {
			returnButton() {
				uni.$u.route('/pages/ls/carWash/carWash');
			}
		}
	}
</script>

<style lang="scss">
	.nav_btn {
		position: absolute;
		bottom: 6vh;
		right: 2vw;
		width: 30vw;
		color: aliceblue;
		height: 7vw;
		text-align: center;
		font-size: 34rpx;
		background-image: url('@/static/images/ls/矩形 10 拷贝@3x.png');
		background-size: 100%;
		background-repeat: no-repeat;


	}

	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.content {
		// height: 85vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		map {
			width: 100%;
			height: 70vh;
		}
	}
</style>